<template>
  
  <div id="echartsMap">
    <table style="height:100%;width:100%;">
      <tr>
      <td style="width:75%;" rowspan="2">
        <div id="echartsChina1">
           <div id="echartsChina"  @click="redirectToIndustryList">
               <img style="width:100%;height:100%;cursor:hand;" :src="this.imgUrl" title="点击图片进入园区数据分析"> 
           </div>
          </div>
      </td>
      <td>
        <div id="decContent">
            <h2 style="margin-left:10px;">数据全景</h2>
            <ul class="login-info-list" style="margin-left:10px;">
              <li class="login-info-item" v-for="(item,index) in listDec" :key="index">
                {{item}}
              </li>
              <li>
                  <el-button type="plain" @click="viewPlan">查看园区规划图</el-button>
              </li>
            </ul>
        </div>
      </td>
        </tr>
        <tr>
          <td>
            <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="企业流量排名" name="third">
                <div id="echartsRigthTop5"></div>
              </el-tab-pane>

              <el-tab-pane label="实时曲线" name="first">
                <div id="echartsRigthBottom"></div>
              </el-tab-pane>
              <el-tab-pane label="流量曲线" name="second">
                <div id="echartsRigthTop"></div>
              </el-tab-pane>
              
            </el-tabs>
            <!-- <div id="echartsRigthBottom"></div> -->
          </td>
          </tr>
    </table>
    <el-dialog :visible.sync="dialogFormVisible">
        <img style="width:600px;height:480px;" :src="this.imgUrl"> 
    </el-dialog>
  </div>
</template>

<script>
import "../../../assets/js/requireDetails.js";
import{
  getObj,
   getIndustryByUserPermission,
} from '@/api/bus/sensor/industry'

import{
    getLatestSensorList,
    getSensorDataForPeriodOfTime,
    getTop5StaticData,
    getTop5PointData
} from '@/api/bus/sensor/sensorData'

export default {
  name: 'industryDetail',
  data () {
    return {
    msg: '',

    activeName: 'third',
    listDec:[],
    ueTemp:Math.random() * 500+500,
    datas:[], 
    industryId:'',
    oneHourData:[],//一个小时的流量累计
    oneDayData:[],//一天的流量累计
    oneHourChart:{},
    oneDayChart:{},

    top5DataXAxis:[],
    top5DataYAxis:[],
    dataMax:0,
    series:[],
    dataXAxis:[],
    dataYAxis:[],
    dataLegend:[],
    top5DataXAxis:[],
    top5DataYAxis:[],

    oneHourseries:[],
    oneHourdataXAxis:[],
    oneHourdataYAxis:[],
    oneHourdataLegend:[],
    oneHourDataXAxis:[],
    oneHourDataYAxis:[],
    oneHourdataMax:0,

     imgUrl:"",
    dialogFormVisible:false,
    }
  },
  created() {
  },
  mounted(){
    this.industryId = this.$route.query.industryId;
    this.drawChinaMap();
    // this.drawTop();
  },
  methods: {

    viewPlan(){
        this.dialogFormVisible=true;
    },
    //根据ID查询园区描述信息
    getIndustryInfo(){
        if(this.industryId = 'undefined'){
            getIndustryByUserPermission().then(response=>{
                if(response.data.legend<1)
                {
                    alert('未找到用户的默认园区信息!');
                    return ;
                }
                this.industryId = response.data[0].id;
                getObj(this.industryId).then(response=>{
                    this.imgUrl = response.data.industryImgUrl;
                    this.listDec.push(
                    response.data.industryDec,
                    );
                })
            })
        }
        else{//多写一遍的愿意你是因为request是异步处理
            getObj(this.industryId).then(response=>{
            this.imgUrl = response.data.industryImgUrl;
            this.listDec.push(
            response.data.industryDec,
            );
        })
        }
        
    },
    drawChinaMap() {
      this.getIndustryInfo();
        setTimeout(() => {
          this.drawTop5();
        }, 1000); 
      
    },
    redirectToIndustryList(){
        this.$router.push({
          path:'/bus/industry/analysis',
          components:'views/bus/industry/analysis',
          query:{
                'industryId':this.industryId,
              }
        });
    },
    handleClick(tab, event) {
            if(tab.name == 'first')
            {
                setTimeout(() => {
                    this.drawBottom();
                }, 200);
            }
            if(tab.name == 'second')
            {
              setTimeout(() => {
                   this.drawTop();
              }, 100);
               
            }
            else if( tab.name == 'third')
            {
              setTimeout(() => {
                this.drawTop5();
              }, 100);
                
            }
      },
      drawTop5(){
            let that       = this;
            that.dataXAxis=[];
            that.dataYAxis=[];
            getTop5PointData(this.industryId,"INDUSTRY").then(response=>{
                 for (let index = 0; index < response.data.length; index++) {
                  var vt = response.data[index];
                  that.dataXAxis.push(Number(vt.data));
                  that.dataYAxis.push(vt.searchName);
                  if(that.dataMax < Number(vt.data))
                  {
                    that.dataMax = Number(vt.data)/0.9;
                  }
                }
                var chartBottom = document.getElementById('echartsRigthTop5');
                chartBottom.style.width = document.body.clientWidth*0.25+"px"
                that.chartTop5 = that.$echarts.init(document.getElementById('echartsRigthTop5'));
                that.chartTop5.setOption({
                    color: ['#3398DB'],
                    title: {
                        text: '园区流量排行Top5',
                        //textStyle: {
                        //    color: '#fff'
                        //}
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                    },
                    /*legend: {
                        data: [date]
                    },*/
                    grid: {
                        left: '4%',
                        right: '4%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        min: 0,
                        max: that.dataMax,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                //color: '#fff',  
                                fontWeight: '80'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data:that.dataYAxis,
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: 0,
                            margin: 10,
                            inside: false,
                            textStyle: {
                                //color: '#fff',
                                fontWeight: '50'
                            }
                        }
                    },
                    series: [{
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                // formatter: '{c}',
                                formatter: function(v) {
                                    var val = v.data;
                                    if (val == 0) {
                                        return '';
                                    }
                                    return val;
                                },
                                color: '#fff'
                            }
                        },
                        // data: [22, 33, 44, 55, 66, 77, 88]
                        data:that.dataXAxis
                    }]
                });
              });
            
          },
      drawTop(){
            let that       = this;
            var chartBottom = document.getElementById('echartsRigthTop');
            chartBottom.style.width = document.body.clientWidth*0.25+"px"
            that.myOneDayChart = that.$echarts.init(document.getElementById('echartsRigthTop'));
            that.myOneDayChart.setOption({
                title: {
                    text: '全国日累计流量'
                },
                tooltip: {
                    trigger: 'axis',
                    //formatter: "{b} <br> 合格率: {c}%"
                },
                //解决Y轴显示不全的情况
                grid: {
                    left: 60
                },
                xAxis: {
                    type     : 'category',
                    splitLine: {
                        show: true
                    }
                },
                yAxis: {
                    type       : 'value',
                    boundaryGap: [0, '100%'],
                    splitLine  : {
                        show: false
                    },
                    

                },
                series: [{
                    name     : '累计流量数据',
                    type     : 'line',
                    itemStyle: {
                      normal : {
                        lineStyle:{
                          color: 'red'
                        }
                      }
                    },
                    showSymbol    : false,
                    hoverAnimation: false,
                    data          : []
                }]
             });
          var vt = this.getNowFormatDate(0,0);
          var vtOneDayBefore = this.getNowFormatDate(0,1);
          //全国日流量排行
          getTop5StaticData(this.industryId,"INDUSTRY","DAY",vtOneDayBefore,vt).then(response=>{
              this.refreshOneDayLineChartData(response);
          });
      },
      drawBottom(){
        let that = this;
        var chartBottom = document.getElementById('echartsRigthBottom');
        chartBottom.style.width = document.body.clientWidth*0.25+"px"
        this.oneHourChart = that.$echarts.init(document.getElementById('echartsRigthBottom'));
        this.oneHourChart.setOption({
            title: {
                text: '园区实时流量图'
            },
            // legend:{
            //   data:['压力传感数据','热力传感数据'],
            // },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {

                //   return params =params[0].seriesName+ '\n'+params[0].data.value[0] + '---' +parseInt( params[0].data.value[1])+'\n';
                // },
                axisPointer: {
                    animation: false,
                    type:'none',
                },
                extraCssText:'width:220px; white-space:pre-wrap'
            },
            //解决Y轴显示不全的情况
            grid: {
                left: 80
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                

            },
            series: [{
                name: '日实时流量累计',
                type: 'line',
                itemStyle : {
                  normal : {
                    lineStyle:{
                      color:'red'
                    }
                  }
                },
                showSymbol: false,
                hoverAnimation: false,
                data:[]
            }
            ]
          });
          var vt = this.getNowFormatDate(0,0);
          var vtOneHourBefore = this.getNowFormatDate(1,0);
        //   getSensorDataForPeriodOfTime(this.industryId,"INDUSTRY",vtOneHourBefore,vt).then(response=>{
        //       this.refreshLineChartData(response);
        //   });
        getTop5StaticData(this.industryId,"INDUSTRY","REAL",vtOneHourBefore,vt).then(response=>{
            if(response == null || response.data.length<1)
            {
            alert('未能获取到相关数据');
            return;
            }
            if(response.data.length>0)
            {
                this.refreshLineChartData(response);
            }
            
        });
      },
      //刷新当前时点一小时流量图
      refreshLineChartData(responseDatas){
        let that = this;
        that.oneHourData=[];
        that.oneHourdataXAxis=[];
        that.oneHourdataYAxis=[];
        that.oneHourdataLegend=[];
        that.oneHourseries=[];
        if(responseDatas.length != 0){
            for (let index = 0; index < responseDatas.data.length; index++) {
            var vt = responseDatas.data[index];
            that.oneHourdataLegend.push(vt[0].searchName);
            var yAxis=[];
            for(let j=0;j<vt.length;j++){
                var vtt = vt[j];
                if(index == 0)
                {
                    that.oneHourDataXAxis.push(vtt.timePoint.substring(11,16));
                }
                
                yAxis.push(vtt.data);
            }
            that.oneHourseries.push({
                name:vt[0].searchName,
                type:'line',
                data : yAxis
            })
            }
        }
        this.oneHourChart.setOption({
            legend: {
                data: that.oneHourdataLegend,
                padding:30,
            },
            xAxis:{
                data:that.oneHourDataXAxis,
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 90,
                end: 100
            }, {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }],
            series:that.oneHourseries
            })
        
        
      },
      //刷新当前时点24小时流量图
      refreshOneDayLineChartData(responseDatas){
        let that = this;
        that.oneDayData=[];
        that.dataLegend=[];
        that.top5DataXAxis=[];
        that.top5DataYAxis=[];
        that.series=[];
        if(responseDatas.length != 0){
            for (let index = 0; index < responseDatas.data.length; index++) {
            var vt = responseDatas.data[index];
            that.dataLegend.push(vt[0].searchName);
            var yAxis=[];
            for(let j=0;j<vt.length;j++){
                var vtt = vt[j];
                if(index == 0)
                {
                    that.top5DataXAxis.push(vtt.timePoint.substring(11,16));
                }
                
                yAxis.push(vtt.data);
            }
            that.series.push({
                name:vt[0].searchName,
                type:'line',
                data : yAxis
            })
            }
        }
        console.log('fuck',that.series);
        this.myOneDayChart.setOption({
            legend: {
                data: that.dataLegend,
                padding:30,
            },
            xAxis:{
                data:that.top5DataXAxis,
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 90,
                end: 100
            }, {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }],
            series:that.series
            })
        
      },
      getNowFormatDate(ifOneHour,ifOneDay){

            var timestamp = Date.parse(new Date());
            var subOneHour = ifOneHour*1*60*60*1000;
            var subOneDay = ifOneDay*7*24*60*60*1000;

            timestamp=timestamp-subOneHour-subOneDay;
            var unixtimestamp = new Date(parseInt(timestamp));
            var year = 1900 + unixtimestamp.getYear();
            var month = "0" + (unixtimestamp.getMonth() + 1);
            var date = "0" + (unixtimestamp.getDate()-ifOneDay*7);
            var hour = "0" + (unixtimestamp.getHours()-ifOneHour*1);
            var minute = "0" + unixtimestamp.getMinutes();
            var second = "0" + unixtimestamp.getSeconds();
            return year + "-" + month.substring(month.length-2, month.length)  + "-" + date.substring(date.length-2, date.length)
                  + " " + hour.substring(hour.length-2, hour.length) + ":"
                  + minute.substring(minute.length-2, minute.length) + ":"
                  + second.substring(second.length-2, second.length);
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 #echartsMap{
    width: 100%;
    height:500px;
    display:block;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
}

 #echartsChina1{
    width:98%;
    height:100%;
    float: left;
      border-radius:5px;
      box-sizing: border-box;
      background:#fff;
      overflow: hidden;
  }

#echartsChina{
  width:100%;
  height:600px;
  /*display:block;*/
  float: left;
  /* background: url(page.imgUrl) */
}

#tdMap{
    width : 75%;
    height: 500px;
  }
  #decContent{
    width        : 100%;
    height       : 230px;
    border-radius: 5px;
    box-sizing   : border-box;
    background   : #fff;
    overflow     : hidden;
  }

  #echartsRigthTop{
    width        : 90%;
    height       : 240px;
    border-radius: 5px;
    box-sizing   : border-box;
    background   : #fff;
    overflow     : hidden;
  }

    #echartsRigthTop5{
    width        : 90%;
    height       : 240px;
    border-radius: 5px;
    box-sizing   : border-box;
    background   : #fff;
    overflow     : hidden;
  }

  #echartsRigthBottom{
    margin-top   : 10px;
    width        : 100%;
    height       : 240px;
    border-radius: 5px;
    box-sizing   : border-box;
    background   : #fff;
    overflow     : hidden;
      
  }

</style>